<template>
    <div class="photoInfo">
        <div class="photoTitle">
            <h3>{{photoinfo.title}}</h3>
            <p>
                <span>发表时间: {{photoinfo.add_time | dateFormat}}</span>
                <span>点击: {{photoinfo.click}}次</span>
            </p>
        </div>
        <hr>
        <!-- 缩略图区域 -->
        <div class="preview">
            <img class="preview-img" v-for="(item,index) in thumimages" :key="index" :src="item.src" height="100" @click="$preview.open(index, thumimages)">
        </div>
        <!-- content -->
        <div class="content" v-html="photoinfo.content"></div>
        <!-- 评论部分 -->
        <comment :id=id></comment>

    </div>
</template>

<script>
import { Toast } from 'mint-ui'
import comment from '../subcomponent/comment.vue'
export default {
    data(){
        return {
            id : this.$route.params.photoid,
            photoinfo:[],
            thumimages:[]
        }
    },
    methods:{
        // /api/getimageInfo/:imgid
        getimageInfo(){
            this.$http.get('api/getimageInfo/'+this.id).then(result=>{
                if(result.body.status === 0) {
                    this.photoinfo = result.body.message[0]
                } else {
                    Toast('获取图片详情失败')
                }
            })
        },
        getthumimages(){
            this.$http.get('api/getthumimages/'+this.id).then(result=>{
                if(result.body.status === 0) {
                    this.thumimages = result.body.message
                    this.thumimages.forEach(item=>{
                        item.w = 600,
                        item.h = 400
                    })
                } else {
                    Toast('获取缩略图失败')
                }
            })
        }
    },
    created(){
        this.getimageInfo()
        this.getthumimages()
    },
    components:{
        comment
    }
}
</script>

<style lang="less">
    .photoInfo {
        padding: 0 5px;
        .photoTitle {
            h3 {
                color: #26a2ff;
                text-align: center;
                font-size: 16px;
                line-height: 30px;
            }
            p {
                font-size: 14px;
                display: flex;
                justify-content:space-between;
                color: gray;
            }  
        }
        .preview{
            img {
                margin: 10px;
                box-shadow: 0 0 9px #999;
            }
        }
        .content{
            font-size: 14px;
            line-height: 30px;
        }
    }    
</style>